<template>
  <div class="page">
    <m-header :title="langText&&langText.find" :canback="Boolean(false)"></m-header>
    <div class="body">
      <ul class="news">
        <li class="news-list" v-for="item in noticeTitle" :key="item.id" @click="$router.push({name:'FindDetails',query:{id:item.id}})">
          <div class="left-line">
            <div class="news-date">
              <p class="date">{{item.title}}</p>
            </div>
            
              <div class="img_box">
                <img v-for="(v,i) in item.images" :key="i" :src="api+v" alt="">
              </div>
          </div>
        </li>
        
      </ul>
    </div>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
import { Owner,Base } from "@/server/server.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      noticeTitle: [],
      contents: null,
      langText:null,
      find: {},
    };
  },
  created() {
    this.getNotice();
  },
  mounted(){
    this.getlang();
  },
  computed: {
    ...mapGetters(["lang","getLangId",'api'])
  },
  methods: {
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.tradingcenter,res.data.menu,res.data.register,res.data.currency,res.data.find)
          setTimeout(()=>{
            
            localStorage.setItem('tradingcenter',JSON.stringify(this.langText));
          },200)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    getNotice() {
      Owner.getTitle({type:'fx'}).then(res => {
        if (res.code == 1) {
          this.noticeTitle = res.data;
        } else {
          mui.toast(res.msg);
        }
      });
    },
    getNoticeDetail(id) {
      Owner.getNoticeDetail({ id }).then(res => {
        if (res.code == 1) {
          // this.contents = res.data[0].contents;
          document.getElementById("con" + id).innerHTML = res.data[0].contents;
        } else {
          mui.toast(res.msg);
        }
      });
    },
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // padding: @margin-primary;
  // padding: 30px;
  background-color: @bg-color;
  .type {
    .display-flex();
    justify-content: space-around;
    .type-list {
      padding: 30px 0;
      width: 30%;
      box-shadow: 2px 2px 10px 0px rgba(120, 195, 248, 0.3);
      border-radius: 10px;
      text-align: center;
      color: #406ec3;
      .type-img {
        width: 60px;
        height: 60px;
        margin-bottom: 29px;
      }
    }
  }
  .news {
    // margin-top: 40px;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    .news-list {
      // .display-flex();
      // padding-bottom: 30px;
      .left-line {
        position: relative;
        padding-left: 50px;
        padding-bottom: 30px;
        // padding-top: 30px;
        // border-left: 3px solid #406ec3;
        .news-date {
          .display-flex();
          justify-content: space-between;
          .date {
            flex: 1;
            margin-right: 10px;
            color: #4EB6AD;
            font-size: 28px;
            font-weight: 550;
          }
          .open {
            color: #406ec3;
          }
        }
        
        .img_box{
          // width: 250px;
          width: auto;
          height: auto;
          // background-color: #000;
          img{
            width: 250px;
            height: 250px;
            // border: 1px soild #000;
            // background-color: #000;
            display: inline-block;margin-right: 10px;
          }
        }
        .news-img {
          margin-top: 11px;
          width: 100%;
          border-radius: 10px;
        }
        .cont {
          word-break: break-all;
        }
        &::before{
          content: "";
          display: block;
          width: 20px;
          height: 20px;
          background-color: #ccc;
          border-radius: 50%;
          position: absolute;
          top: 10px;
          left: 10px;
        }
        &::after{
          content:"";
          display: block;
          width: 6px;
          height: 100%;
          background-color: #ccc;
          position: absolute;
          left: 15px;
          top: 25px;
        }
      }
      
      &:last-child{
        .left-line{
          &::after{
            display: none;
          }
        }
      }
      
    }
  }
}
.page{
  /deep/ section .header .nav{
    background-color: #fff !important;
    span{
      color: #000;
    }
    .center{
      color: #000;
    }
  }
}
</style>